Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Iconhub – 免費線上圖標 Icons，6 種風格 3,222 個圖標可商用免署名
Iconhub 是一個提供上千種圖標 Icons 的免費資源網站，其中包含了 6 種不同的圖標樣式可自由進行選擇，除了能讓你下載 SVG 格式的 Icons 檔案之外，還提供直接複製 HTML 格式，讓你能夠貼在網站當中直接使用。
用 AI 摘要這篇文章：
做網站或設計 UI 時，圖標（Icons）是少不了的視覺元素。但自己畫太慢，上網找又要花時間比對風格和授權。Iconhub 提供超過 3,200 個免費可商用圖標，一次提供 6 種風格可即時切換，調好大小、粗細和顏色後直接下載 SVG 或複製原始碼，是目前線上即時客製化體驗最完整的免費圖標平台之一。
截至 2026 年 5 月，Iconhub 收錄 3,222 個圖標，涵蓋導航箭頭、社交平台 Logo、檔案操作、使用者介面等常見分類。每一個圖標都有 6 種不同風格可以自由切換，而且所有參數（大小、筆畫粗細、顏色）調整後會即時反映在畫面上。輸出格式支援 SVG 檔案下載和 HTML 原始碼複製，設計師和前端工程師都能直接使用。如果你之前用過 Feathericons 或 Flaticon，操作邏輯大同小異，但 Iconhub 多了風格切換的彈性。
網站名稱：Iconhub
網站網址：https://iconhub.io/
目錄
Iconhub 是什麼？6 種圖標風格一次看懂
Iconhub 是一個免費的線上圖標資源平台，由 One Week Wonders 團隊開發維護，原始碼公開在 GitHub 上。它的核心特色是「一組圖標、六種風格」：同一個圖標可以在 6 種不同的視覺風格之間即時切換，不需要分別到不同平台找不同風格的版本。
平台左上角的風格選擇器提供了以下 6 種樣式：
- Line（線條）：筆畫纖細的輪廓線條，視覺乾淨俐落。適合極簡風格的網站和 SaaS 產品，跟 Heroicons 的 Outline 版本風格接近。
- Glyph（實心）：圖標內部完全填滿，視覺重量最重。在深色背景上效果特別好，很多 App 的 Tab Bar 用實心圖標表示「目前選中」狀態。
- Line Color（線條填色）：在線條輪廓的基礎上加入色彩填充，比純線條更有層次感，同時保留了輪廓的清晰度。
- Flat Color（平面填色）：完全平面的色彩填色風格，沒有漸層或陰影。這種風格在 Material Design 體系中很常見。
- Flat Line（平面線條）：結合平面色塊和線條輪廓的混合風格，比純線條有分量但不至於太厚重。
- Multi Color（多色）：使用多種顏色的雙色或多色風格，視覺最豐富。適合需要圖標本身就有裝飾效果的場景。
切換風格的操作很直覺：點選左側面板的不同樣式按鈕，右側所有圖標就會同步更新。跟 CSS.GG 和 Lineicons 相比，Iconhub 在「一個平台提供六種視覺風格完全不同的版本」這件事上確實做得最完整。多數平台只提供 Outline 和 Solid 兩種，Iconhub 額外加入了填色和多色選項。
Iconhub 自訂功能：大小、粗細、顏色即時調整
Iconhub 的自訂功能集中在左側面板，從上到下依序是風格、尺寸、筆畫粗細和顏色四個區塊。每個參數都會即時影響右側圖標的呈現方式，可以邊調邊看。
尺寸（SIZE）
決定圖標的輸出尺寸。網頁導航列通常用 24px 或 32px，行動裝置 Tab Bar 用 48px 或 64px，列印或大面積展示可能需要 96px 以上。SVG 是向量格式，不管設多大的尺寸都不會失真。
筆畫粗細（STROKE）
控制線條粗細，主要影響 Outline 類型的風格。實務經驗：網站字體偏細（300-400 weight）搭配細筆畫圖標比較和諧；字體粗獷（600+ weight）則搭粗筆畫更協調。如果需要幫整個專案定義一致的色彩規範，可以搭配 ColorSpace 配色工具 來規劃配色方案。
顏色（COLORS）
可以直接選擇圖標主色調。Outline 風格會套用在線條上，Filled 風格會填滿整個圖標形狀。建議直接輸入品牌主色的 HEX 值，這樣下載後就不需要二次調色。
如何在 Iconhub 取得圖標：4 步驟快速上手
- 選擇圖標風格：進入 Iconhub 後，在左上角點選你要的風格（Line、Glyph、Line Color、Flat Color、Flat Line、Multi Color）。
- 調整參數：在左側面板設定圖標尺寸（SIZE）、筆畫粗細（STROKE）和顏色（COLORS），右側預覽區會即時更新。
- 選取圖標：滑鼠移到目標圖標上方，點擊「Select」加入下載清單，或點擊「Copy SVG」直接複製原始碼。
- 下載或貼上：使用 Select 方式的話，點左下角「Download」一次打包下載 SVG 檔案；使用 Copy SVG 的話，直接貼到 HTML 或設計工具中即可。
Iconhub 下載方式：SVG 檔案與 Copy SVG 原始碼
方式一：Select 加入下載清單
滑鼠移到圖標上方會出現「Select」和「Copy SVG」兩個按鈕。點 Select 後圖標會加入左下角的待下載清單，可以繼續挑選，最後一次打包下載所有選取的 SVG 檔案。下載回來的 SVG 可以直接拖進 Figma、Sketch、Adobe XD 使用。
方式二：Copy SVG 直接複製原始碼
前端開發者通常不需要下載檔案，直接點「Copy SVG」就能把 SVG 程式碼複製到剪貼簿，貼到 HTML 裡就能直接渲染。這種做法不需要額外的 HTTP 請求，而且可以用 CSS 直接修改顏色、大小和動畫，客製化彈性比圖片檔案高很多。
兩種方式怎麼選
設計師用 Select 下載 SVG 檔案比較順手，前端工程師用 Copy SVG 嵌入 HTML 更高效。兩者兼顧的話，批次下載 SVG 當素材庫管理，同時用 Copy SVG 處理臨時需要的單一圖標。下載前如果擔心檔案體積，Compressor.io 圖片壓縮工具 可以幫你壓縮 SVG 檔案。
Iconhub 圖標怎麼用在網頁和 WordPress 中
直接嵌入 HTML（SVG inline）
用 Copy SVG 取得原始碼後直接貼到 HTML 裡。圖標跟 HTML 在同一個檔案中，瀏覽器不需要額外載入外部資源，渲染速度最快。SVG 是向量格式，不管螢幕解析度多高都不會模糊。
用 CSS 控制 SVG 樣式
SVG inline 可以用 CSS 精細控制樣式：設定 width 和 height 改變大小，用 fill 改變顏色，加上 transition 和 transform 做 hover 動畫。如果需要在多個頁面重複使用同一組圖標，建議把 SVG 語法包裝成共用的 CSS class，維護更方便。
在 WordPress 中使用
最直接的做法是在 WordPress 區塊編輯器中插入「自訂 HTML」區塊，貼上 Copy SVG 取得的原始碼。若使用 Elementor 等頁面編輯器，也可以透過 HTML Widget 嵌入。要注意有些佈景主題會過濾 SVG 標籤，這時可能需要安裝外掛允許 SVG 顯示，或改用 img 標籤引用外部 SVG 檔案。如果你還沒決定用哪個主題，可以參考 WordPress 佈景主題推薦。
效能注意事項
SVG inline 不需要額外的 HTTP 請求，但頁面使用超過 20 個 SVG 圖標時，HTML 體積可能變大反而影響載入速度。這時可以考慮把常用圖標合併成 SVG sprite，用 use 標籤引用。確保網站有開啟 GZIP 壓縮對 SVG 傳輸效率幫助很大。想進一步了解速度優化，可以參考 WordPress 速度優化技巧。
Iconhub 授權與商用限制
根據 Iconhub 官方網站及 GitHub 上的授權說明，平台上的圖標可以免費用於個人和商業專案。跟 Flaticon 免費方案需要署名（attribution）不同，Iconhub 目前不要求署名，這對不想在每個頁面底部加來源標註的使用者來說方便很多。
但有兩個限制要注意：第一，免費不代表可以隨意轉售，你不能把 Iconhub 的圖標原封不動地上架到其他素材交易平台販售。第二，授權條款有可能隨時調整，建議使用前到官方網站確認最新授權說明。如果你需要更多免費可商用的素材資源，可以參考 TechMoon 的 免費圖庫與圖標資源懶人包。
Iconhub 與其他免費圖標平台比較
免費圖標平台非常多，以下是 Iconhub 與幾個主流平台的關鍵差異：
| 平台 | 圖標數量 | 風格種類 | 線上客製化 | 商用授權 | 需要署名 |
|---|---|---|---|---|---|
| Iconhub | 3,222 | 6 種 | 大小/粗細/顏色 | 免費商用 | 不需要 |
| Flaticon | 數百萬 | 多種 | 顏色 | 免費（需署名） | 需要 |
| Feathericons | 200+ | 1 種 | 大小/粗細/顏色 | MIT 開源 | 不需要 |
| Heroicons | 300+ | 2 種 | 有限 | MIT 開源 | 不需要 |
| Remix Icon | 2,000+ | 2 種 | 有限 | Apache 2.0 | 不需要 |
| iconmonstr | 500+ | 1 種 | 無 | 免費商用 | 不需要 |
Iconhub 的定位很明確：它不是圖標數量最多的平台，也不是格式支援最廣的，但在「多風格切換加上即時客製化」這個細分領域裡，它確實是目前最方便的選擇之一。
Iconhub 適合誰？不適合誰？
適合你，如果…
- 你是前端開發者：經常需要快速取得 SVG 原始碼貼入 HTML 專案，Copy SVG 功能讓你在幾秒鐘內拿到可用的程式碼。
- 你是 UI 設計師：專案中需要多種風格的圖標來做視覺比較，六種風格切換讓你在同一個介面裡看完所有變化。
- 你是接案工作者：幫不同客戶做網站需要風格多樣的圖標，六種風格幾乎涵蓋大部分客戶喜歡的設計語言。
- 你是 WordPress 網站經營者：想豐富網站視覺但不想花錢買素材，Iconhub 的免費商用授權正好滿足需求。
可能不適合你，如果…
- 你需要品牌 Logo 圖標：Iconhub 以通用型 UI 圖標為主，品牌 Logo 建議用 Simple Icons。
- 你需要動畫圖標：Iconhub 只提供靜態圖標，需要 GIF 或 Lottie 動畫圖標建議改用 Icons8 的 Animated Icons。
- 你需要超大圖標庫：如果你需要「每一個想到的功能都有對應圖標」，Flaticon 數百萬的圖標庫更適合。
- 你不想註冊帳號：Iconhub 需要註冊免費帳號才能下載。臨時需要一兩個圖標不想註冊的話，iconmonstr 可以直接下載。
更多免費圖標資源推薦
除了 Iconhub，以下也值得收藏：
- Feathericons：200+ 精簡線條圖標，開源，適合極簡風格網站。
- Heroicons：Tailwind CSS 專案首選圖標庫。
- CSS.GG：700+ 開源圖標，支援 .css、.svg、.tsx 等超多格式。
- Remix Icon：2,000+ 開源圖標，27 種分類，線條和填色兩種風格。
- iconmonstr：500+ 免費圖標，支援 SVG/PNG/EPS/PDF，不需註冊。
- Iconpark：大量可客製化圖標，支援多種格式輸出。
3 個立即可以做的下一步
- 前往 Iconhub 註冊免費帳號：到 iconhub.io 註冊，完成後就能開始瀏覽和下載圖標。判斷標準：如果你做的是 UI 或網頁設計，六種風格裡至少會有一種適合你的專案。
- 挑選一個風格試用在專案中：建議先選 Line 或 Glyph 風格，搭配你網站的主色調輸入 HEX 值，下載一組 SVG 測試效果。預期結果：圖標能在設計工具或 HTML 中正常顯示，不需要額外調色。
- 對比兩個以上平台再決定：如果你的需求偏向極簡風格，同時試試 Feathericons；如果需要數量取勝，看看 Flaticon。多試一個平台不花多少時間，但能幫你找到最順手的工作流程。
Iconhub 常見問題 FAQ
Iconhub 是否完全免費？
是的。Iconhub 的圖標可以免費下載和使用，需要註冊免費帳號才能下載，但帳號本身不收費。截至 2026 年 5 月，平台上沒有付費升級或訂閱方案。
Iconhub 圖標能否用於商業專案？
可以。官方說明圖標可用於個人和商業用途，不需要額外購買商用授權。不過授權條款可能隨時調整，建議定期到官方網站確認最新條款。
使用 Iconhub 是否需要署名？
目前不需要。這一點跟 Flaticon 免費方案需要署名的規定不同。對於不想在網站上額外加來源標註的使用者來說更方便。
Iconhub 支援哪些下載格式？
支援兩種：直接下載 SVG 檔案，或複製 SVG 的 HTML 原始碼。SVG 是向量格式，放大縮小不會失真。如果你需要 PNG 格式，可以將下載的 SVG 檔案透過 AnyConv 線上轉檔工具 轉換。
Iconhub 與 Flaticon 有什麼不同？
最大差異在於風格切換和授權條件。Iconhub 提供 6 種可即時切換的風格，而且不需要署名；Flaticon 圖標數量遠多於 Iconhub（數百萬 vs 3,000+），但免費方案需要署名。重視風格多樣性和免署名選 Iconhub；需要盡可能多的圖標選擇選 Flaticon。
Iconhub 評價推薦心得
- 提供免費線上圖標 Icons，支援商業用途
- 3,222 個圖標，6 種風格可即時切換
- 可自訂圖標大小、粗細與顏色
- 可下載 SVG 檔案或複製 HTML 格式
- 需要註冊免費帳號才能下載
- 免費商用，不需要署名
